<template>
  <div class="addGoodsAdd">
    <el-dialog
      :visible.sync="dialogFormVisible"
      :title="topTitle"
      :show-close="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <!-- 点击上面的新增 -->
      <div class="newAddEdit" style="margin: 0 auto; width: 80%">
        <div class="newAddConfig">
          <el-form
            :model="addGoodsData"
            ref="addGoodsData"
            class="demo-dynamic"
            label-width="180px"
          >
            <el-form-item
              prop="prizeName"
              label="奖品名称"
              :rules="[
                { required: true, message: '请输入奖品名称', trigger: 'blur' },
              ]"
            >
              <el-input
                v-clear-emoij
                placeholder="请输入奖品名称"
                maxlength="40"
                v-model="addGoodsData.prizeName"
                style="width: 63%"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="coin"
              label="兑换积分"
              :rules="[
                {
                  required: true,
                  message: '请输入兑换所需得积分',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                maxlength="10"
                min="0"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                placeholder="请输入兑换所需得积分"
                v-model="addGoodsData.coin"
                style="width: 63%"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="total"
              label="库存"
              :rules="[
                { required: true, message: '请输入奖品库存', trigger: 'blur' },
              ]"
            >
              <el-input
                min="0"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                placeholder="请输入奖品库存"
                maxlength="10"
                v-model="addGoodsData.total"
                style="width: 63%"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="orderNo"
              label="主页轮播排序"
              :rules="[
                {
                  required: true,
                  message: '请输入主页轮播排序',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                min="0"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                placeholder="请输入主页轮播排序"
                maxlength="10"
                v-model="addGoodsData.orderNo"
                style="width: 63%"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="orderList"
              label="积分商城排序"
              :rules="[
                {
                  required: true,
                  message: '请输入积分商城排序',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                min="0"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                placeholder="请输入积分商城排序"
                maxlength="10"
                v-model="addGoodsData.orderList"
                style="width: 63%"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="奖品类型"
              :rules="[
                { required: true, message: '请选择奖品类型', trigger: 'blur' },
              ]"
            >
              <el-select
                v-model="addGoodsData.type"
                clearable
                placeholder="请选择奖品类型"
                style="width: 270px"
                @change="bclxChange"
              >
                <el-option
                  v-for="item in gooodsLisr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <div v-if="isJxBc">
              <el-form-item
                label="优惠券e-name"
                :rules="[
                  {
                    required: true,
                    message: '请输入优惠券e-name',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
            
                  placeholder="请输入优惠券e-name"
                  v-model="addGoodsData.ext.coupons"
                  style="width: 63%"
                ></el-input>
              </el-form-item>
            </div>

            <el-form-item
              label="可兑换日期"
              :rules="[
                { required: true, message: '请选择时间', trigger: 'blur' },
              ]"
            >
              <el-date-picker
                v-model="prizeDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd"
                @change="changeDate"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="商品状态">
              <el-radio v-model="addGoodsData.status" :label="1">上架</el-radio>
              <el-radio v-model="addGoodsData.status" :label="2">下架</el-radio>
            </el-form-item>
            <el-form-item
              label="主页轮播图(694*720)"
              :rules="[
                {
                  required: true,
                  message: '请选择轮播图',
                  trigger: 'blur',
                },
              ]"
            >
              <div class="picCommodity">
                <el-upload
                  class="upload-demo"
                  :action="uploadUrl + '/api/v2.1/oss/aliyun/upload'"
                  name="files"
                  :data="{ type: 'add_main_' }"
                  :on-success="uploadSuccessConfig3"
                  :before-upload="
                    (file) => {
                      return beforeAvatarUploadConfig(file, 694, 720);
                    }
                  "
                  :headers="myHeaders"
                  :on-error="uploadErrorConfig"
                  multiple
                  :file-list="fileListArea"
                  :show-file-list="false"
                >
                  <img
                    v-show="addGoodsData.ext.imageUrl"
                    :src="addGoodsData.ext.imageUrl"
                    alt
                    style="height: 100px"
                    @click.stop=""
                  />
                  <i
                    v-show="addGoodsData.ext.imageUrl"
                    class="el-icon-error imgDelete"
                    @click.stop="uploadimgDeleteArea4()"
                  ></i>
                  <el-button
                    v-show="!addGoodsData.ext.imageUrl"
                    @click="clickUploadAdd"
                    >点击传图</el-button
                  >
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item
              label="积分商城图(200*204)"
              :rules="[
                {
                  required: true,
                  message: '请填写积分商城图',
                  trigger: 'blur',
                },
              ]"
            >
              <div class="picCommodity">
                <el-upload
                  class="upload-demo"
                  :action="uploadUrl + '/api/v2.1/oss/aliyun/upload'"
                  name="files"
                  :data="{ type: 'add_main_' }"
                  :on-success="uploadSuccessConfig"
                 
                  :headers="myHeaders"
                  :on-error="uploadErrorConfig"
                  multiple
                  :file-list="fileListArea"
                  :show-file-list="false"
                >
                  <img
                    v-show="addGoodsData.ext.exchangeStoreImg"
                    :src="addGoodsData.ext.exchangeStoreImg"
                    alt
                    style="height: 100px"
                    @click.stop=""
                  />
                  <i
                    v-show="addGoodsData.ext.exchangeStoreImg"
                    class="el-icon-error imgDelete"
                    @click.stop="uploadimgDeleteArea1()"
                  ></i>
                  <el-button
                    v-show="!addGoodsData.ext.exchangeStoreImg"
                    @click="clickUploadAdd"
                    >点击传图</el-button
                  >
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item
              label="详情页主图(750*561)"
              :rules="[
                {
                  required: true,
                  message: '请填写详情页主图',
                  trigger: 'blur',
                },
              ]"
            >
              <div class="picCommodity">
                <el-upload
                  class="upload-demo"
                  :action="uploadUrl + '/api/v2.1/oss/aliyun/upload'"
                  name="files"
                  :data="{ type: 'add_main_' }"
                  :on-success="uploadSuccessConfig1"
                  :before-upload="
                    (file) => {
                      return beforeAvatarUploadConfig(file, 750, 561);
                    }
                  "
                  :headers="myHeaders"
                  :on-error="uploadErrorConfig"
                  multiple
                  :file-list="fileListArea"
                  :show-file-list="false"
                >
                  <img
                    v-show="addGoodsData.ext.detailsMasterImg"
                    :src="addGoodsData.ext.detailsMasterImg"
                    alt
                    style="height: 100px"
                    @click.stop=""
                  />
                  <i
                    v-show="addGoodsData.ext.detailsMasterImg"
                    class="el-icon-error imgDelete"
                    @click.stop="uploadimgDeleteArea2()"
                  ></i>
                  <el-button
                    v-show="!addGoodsData.ext.detailsMasterImg"
                    @click="clickUploadAdd"
                    >点击传图</el-button
                  >
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item
              label="详情页副图(750*440)"
              :rules="[
                {
                  required: true,
                  message: '请填写详情页副图',
                  trigger: 'blur',
                },
              ]"
            >
              <div class="picCommodity">
                <el-upload
                  class="upload-demo"
                  :action="uploadUrl + '/api/v2.1/oss/aliyun/upload'"
                  name="files"
                  :data="{ type: 'add_main_' }"
                  :on-success="uploadSuccessConfig2"
                  :headers="myHeaders"
                  :on-error="uploadErrorConfig"
                  multiple
                  :file-list="fileListArea"
                  :show-file-list="false"
                >
                  <img
                    v-show="addGoodsData.ext.detailsSlaveImg"
                    :src="addGoodsData.ext.detailsSlaveImg"
                    alt
                    style="height: 100px"
                    @click.stop=""
                  />
                  <i
                    v-show="addGoodsData.ext.detailsSlaveImg"
                    class="el-icon-error imgDelete"
                    @click.stop="uploadimgDeleteArea3()"
                  ></i>
                  <el-button
                    v-show="!addGoodsData.ext.detailsSlaveImg"
                    @click="clickUploadAdd"
                    >点击传图</el-button
                  >
                </el-upload>
              </div>
            </el-form-item>

            <el-form-item
              label="我的收藏图(200*204)"
              :rules="[
                {
                  required: true,
                  message: '请选择收藏图',
                  trigger: 'blur',
                },
              ]"
            >
              <div class="picCommodity">
                <el-upload
                  class="upload-demo"
                  :action="uploadUrl + '/api/v2.1/oss/aliyun/upload'"
                  name="files"
                  :data="{ type: 'add_main_' }"
                  :on-success="uploadSuccessConfig4"
                  :before-upload="
                    (file) => {
                      return beforeAvatarUploadConfig(file, 200, 204);
                    }
                  "
                  :headers="myHeaders"
                  :on-error="uploadErrorConfig"
                  multiple
                  :file-list="fileListArea"
                  :show-file-list="false"
                >
                  <img
                    v-show="addGoodsData.ext.collectImg"
                    :src="addGoodsData.ext.collectImg"
                    alt
                    style="height: 100px"
                    @click.stop=""
                  />
                  <i
                    v-show="addGoodsData.ext.collectImg"
                    class="el-icon-error imgDelete"
                    @click.stop="uploadimgDeleteArea5()"
                  ></i>
                  <el-button
                    v-show="!addGoodsData.ext.collectImg"
                    @click="clickUploadAdd"
                    >点击传图</el-button
                  >
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item
              label="我的兑换图(252*193)"
              :rules="[
                {
                  required: true,
                  message: '请选择兑换图',
                  trigger: 'blur',
                },
              ]"
            >
              <div class="picCommodity">
                <el-upload
                  class="upload-demo"
                  :action="uploadUrl + '/api/v2.1/oss/aliyun/upload'"
                  name="files"
                  :data="{ type: 'add_main_' }"
                  :on-success="uploadSuccessConfig5"
                  :headers="myHeaders"
                  :on-error="uploadErrorConfig"
                  :before-upload="
                    (file) => {
                      return beforeAvatarUploadConfig(file, 252, 193);
                    }
                  "
                  multiple
                  :file-list="fileListArea"
                  :show-file-list="false"
                >
                  <img
                    v-show="addGoodsData.ext.exchangeImage"
                    :src="addGoodsData.ext.exchangeImage"
                    alt
                    style="height: 100px"
                    @click.stop=""
                  />
                  <i
                    v-show="addGoodsData.ext.exchangeImage"
                    class="el-icon-error imgDelete"
                    @click.stop="uploadimgDeleteArea6()"
                  ></i>
                  <el-button
                    v-show="!addGoodsData.ext.exchangeImage"
                    @click="clickUploadAdd"
                    >点击传图</el-button
                  >
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item style="margin-top: 40px">
              <el-button type="danger" @click="closeDialog()">取消</el-button>
              <el-button
                type="primary"
                @click="confirmAddConfig('addGoodsData')"
                >确认</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import requestAxios from "../../../http";
export default {
  name: "addGoodsAdd",
  data() {
    return {
      gooodsLisr: [
        {
          value: 1,
          label: "实体奖",
          shiti: true,
        },
        {
          value: 3,
          label: "优惠券",
          youhui: true,
        },
        {
          value: 4,
          label: "积分奖",
          jifen: true,
        },
      ],
      isJxBc: "",
      dialogFormVisible: true, //背景遮罩层
      topTitle: "创建奖品", //弹出框上面的标题
      addGoodsData: {
        prizeName: "",
        coin: "",
        total: "",
        orderList: "",
        orderNo: "",
        type: "",
        onlineTime: "",
        offlineTime: "",
        status: 2, // 上架 、下架
        ext: {
          coupons: "",
          exchangeImage: "",
          detailsMasterImg: "",
          detailsSlaveImg: "",
          collectImg: "",
          imageUrl: "",
          exchangeStoreImg: "",
        },
      }, //点击新增下一个页面要展示出来的数据 //要编辑的列表部分的内容
      fileListArea: [], //图片文件上传列表，定制区域部分
      imgUrl: "", //上传图片部分没有图片显示的
      imgArr: [],
      prizeDate: [],
      uploadUrl: "",
    };
  },
  props: ["addOrEdit"],
  mounted() {
    this.uploadUrl = window.uploadUrl;
    console.log("========window.uploadUrl=======", window.uploadUrl);
  },
  created() {
    this.myHeaders = {
      token: sessionStorage.getItem("authorization"),
    };
  },
  methods: {
    //校验
    //  noSpecialCode(e, type) {
    //   let pattern = "";
    //   switch (type) {
    //     case 1:
    //       pattern = /[\D]*/g;
    //       break;
    //     case 2:
    //       pattern = /[^A-Z\d]*/g;
    //       break;
    //     default:
    //       pattern = /[^0-9A-Za-z\u4e00-\u9fa5]*/g;
    //       break;
    //   }
    //   return e.replace(pattern, "");
    // },
    bclxChange(selectValue) {
      console.log(selectValue, "参数");
      if (selectValue == 3) {
        this.isJxBc = true;
      } else {
        this.isJxBc = false;
      }
    },
    //选择时间
    changeDate(value) {
      console.log("改变时间", value);
      if (value && value.length > 1) {
        this.addGoodsData.onlineTime = value[0] + " 00:00:00";
        this.addGoodsData.offlineTime = value[1] + " 23:59:59";
      } else {
        this.addGoodsData.onlineTime = "";
        this.addGoodsData.offlineTime = "";
      }
    },
    closeDialog(done) {
      console.log("关闭弹窗", done);
      this.$parent.addOrEdit = false;
    },
    //新增页面上传图片
    clickUploadAdd() {
      console.log("点击传图");
    },
    //新增确定调取接口
    confirmAddConfig(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (
            !this.addGoodsData.ext.exchangeImage ||
            !this.addGoodsData.ext.detailsMasterImg ||
            !this.addGoodsData.ext.detailsSlaveImg ||
            !this.addGoodsData.ext.detailsMasterImg ||
            !this.addGoodsData.ext.collectImg ||
            !this.addGoodsData.ext.imageUrl ||
            !this.addGoodsData.ext.exchangeStoreImg
          ) {
            this.$message.error("请完善图片信息！");
            return;
          }
          console.log("formName11111111111111", formName);
          if (this.addGoodsData.ext) {
            this.addGoodsData.ext = JSON.stringify(this.addGoodsData.ext);
          }
          let obj = this.addGoodsData;
          requestAxios
            .fetchPost(
              "/api/v2.1/exchange/store/management/exchangeStore/add",
              obj,
              {
                headers: {},
              }
            )
            .then((data) => {
              if (data.status == 200 && data.data.success) {
                console.log("新增兑换商品结果", data.data);
                //新增成功
                this.$emit("getAddGoodsList");
                this.tip(true, "新增兑换商品成功!");
                this.$parent.addOrEdit = 0;
              } else {
                console.log("=====新增加购商品结果=====", data);
                if (this.addGoodsData.ext) {
                  this.addGoodsData.ext = JSON.parse(this.addGoodsData.ext);
                }
                this.tip(false, data.data.errorMsg);
              }
            })
            .catch((err) => {
              if (this.addGoodsData.ext) {
                this.addGoodsData.ext = JSON.parse(this.addGoodsData.ext);
              }
              console.log(err);
            });
        } else {
          // 获取图形验证码
          this.$message.error("请完善商品信息！");
          return false;
        }
      });
    },
    //上传图片部分的操作
    beforeAvatarUploadConfig(file, width, height) {
      console.log("上传图片", file);
      // return file;
      return this.beforeAvatarUpload(file, 5, width, height);
    },
    uploadSuccessConfig(response, file, fileListArea) {
      console.log("图片上传成功", response);
      if (response.success == false) {
        this.tip(false, "请重新登录");
      } else {
        this.addGoodsData.ext.exchangeStoreImg =response.data;
        this.tip(true, "图片上传成功!");
      }
    },
    uploadSuccessConfig1(response, file, fileListArea) {
      console.log("图片上传成功", response);
      if (response.success == false) {
        this.tip(false, "请重新登录");
      } else {
        this.addGoodsData.ext.detailsMasterImg =response.data;
        this.tip(true, "图片上传成功!");
      }
    },
    uploadSuccessConfig2(response, file, fileListArea) {
      console.log("图片上传成功", response);
      if (response.success == false) {
        this.tip(false, "请重新登录");
      } else {
        this.addGoodsData.ext.detailsSlaveImg =response.data;
        this.tip(true, "图片上传成功!");
      }
    },
    uploadSuccessConfig3(response, file, fileListArea) {
      console.log("图片上传成功", response);
      if (response.success == false) {
        this.tip(false, "请重新登录");
      } else {
        this.addGoodsData.ext.imageUrl =response.data;
        this.tip(true, "图片上传成功!");
      }
    },
    uploadSuccessConfig4(response, file, fileListArea) {
      console.log("图片上传成功", response);
      if (response.success == false) {
        this.tip(false, "请重新登录");
      } else {
        this.addGoodsData.ext.collectImg =response.data;
        this.tip(true, "图片上传成功!");
      }
    },
    uploadSuccessConfig5(response, file, fileListArea) {
      console.log("图片上传成功", response);
      if (response.success == false) {
        this.tip(false, "请重新登录");
      } else {
        this.addGoodsData.ext.exchangeImage =response.data;
        this.tip(true, "图片上传成功!");
      }
    },
    uploadErrorConfig(err, file, fileListArea) {
      console.log("uploadError", err, file, fileListArea);
      this.tip(false, "图片上传失败!");
    },
    //验证图片
    beforeAvatarUpload(file, size = 5, width = 750, height = 1334) {
      console.log("上传图片的宽高限制", width, height);
      let that = this;
      console.log("验证图片", file.type);
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < size;
      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是 PNG/JPG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 5MB!");
        return false;
      }

      //判断图片尺寸
      const isSize = new Promise((resolve, reject) => {
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function () {
          if (width && height) {
            let valid = img.width == width && img.height == height;
            valid ? resolve() : reject();
          } else {
            if (width) {
              let valid = img.width == width;
              valid ? resolve() : reject();
            } else {
              let valid = img.height == height;
              valid ? resolve() : reject();
            }
          }
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          that.imgUploadLetterLoding = true;
          return file;
        },
        () => {
          if (width && height) {
            that.$message.error(`上传图片的尺寸必须为 ${width}*${height}`);
          } else {
            if (width) {
              that.$message.error(`上传图片的宽度必须为 ${width}`);
            } else {
              that.$message.error(`上传图片的高度必须为 ${height}`);
            }
          }
          return Promise.reject();
        }
      );
      return isSize;
    },
    // 图片删除
    uploadimgDeleteArea1() {
      this.addGoodsData.ext.exchangeStoreImg = "";
      console.log("删除了第几个图片");
    },
    uploadimgDeleteArea2() {
      this.addGoodsData.ext.detailsMasterImg = "";
      console.log("删除了第几个图片");
    },
    uploadimgDeleteArea3() {
      this.addGoodsData.ext.detailsSlaveImg = "";
      console.log("删除了第几个图片");
    },
    uploadimgDeleteArea4() {
      this.addGoodsData.ext.imageUrl = "";
      console.log("删除了第几个图片");
    },
    uploadimgDeleteArea5() {
      this.addGoodsData.ext.collectImg = "";
      console.log("删除了第几个图片");
    },
    uploadimgDeleteArea6() {
      this.addGoodsData.ext.exchangeImage = "";
      console.log("删除了第几个图片");
    },
    //提示的通用方法
    tip(state, text) {
      if (state) {
        this.$message({
          showClose: true,
          message: text,
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: text,
          type: "error",
        });
      }
    },
  },
};
</script>
<style>
.addGoodsAdd .close_boun {
  position: absolute;
  font-size: 26px;
  color: white;
  top: 15px;
  right: 10px;
}
.configBounDele {
  margin-right: 46px;
}
.el-icon-error {
  margin-left: 50px;
  font-size: 17px;
  color: rgb(133, 131, 131);
}
.enterInput {
  width: 51%;
  outline: none;
  padding-left: 7px;
}
.disApperInput {
  margin-left: 13%;
}
.disApperInput input {
  outline: none;
}
.closeSelect {
  width: 27%;
  height: 22px;
  padding-left: 7px;
  display: inline-block;
  margin-right: 10%;
  position: relative;
  margin-bottom: 10px;
}
.selectListX {
  /* width: 70%; */
  margin-left: 12%;
}
.selectListX .el-icon-close {
  position: absolute;
  top: 5px;
  left: 130px;
}
.selectListX .closeSelect:nth-child(2n) {
  margin-right: 0;
}
.affirmAddCancel .el-button--danger:focus,
.affirmAddCancel .el-button--danger {
  width: 93px;
  background: white;
  color: #d4af82;
  border: 1px solid #d4af82;
  margin-right: 20px;
}
.clickUpload {
  display: block;
  width: 93px;
  color: #d4af82;
  font-size: 12px;
  height: 28px;
  line-height: 28px;
  border-radius: 4px;
  border: 1px solid #d4af82;
  text-align: center;
  margin-left: 22%;
}
.affirmAddCancel {
  margin-top: 40px;
  text-align: center;
}
.affirmAddCancel .el-button--primary {
  width: 93px;
  /* background: #d4af82; */
  border: none;
}
/* .el-dialog__header {
  background: #77b3a1; 
   text-align: center;
} */
/* .el-dialog__title {
  color: white;
} */
.el-dialog__headerbtn .el-dialog__close {
  /* color: white; */
  font-size: 26px;
}

/*
传图页面的样式
*/
.uploadPicList {
  height: 100px;
  display: flex;
}
.picCommodity {
  height: 100px;
  display: inline-block;
  width: 380px;
  position: relative;
}
.uploadPicName {
  display: inline-block;
  margin-left: 100px;
  width: 150px;
  line-height: 100px;
}
.picCommodity .imgDelete {
  /* color: #d4af82; */
  position: absolute;
  left: -66px;
  top: -9px;
}
.picCommodity img {
  position: absolute;
  left: 0px;
  top: 0px;
}
/* 确定和取消按钮 */
.configUploadPage .affirmAddCancel .el-button--danger:focus,
.configUploadPage .affirmAddCancel .el-button--danger {
  width: 93px;
  background: white;
  /* color: #d4af82;
  border: 1px solid #d4af82; */
  margin-right: 20px;
}
.configUploadPage .affirmAddCancel .el-button--primary {
  width: 93px;
  /* background: #d4af82; */
  border: none;
}
.configUploadPage {
  width: 80%;
  margin: 0 auto;
}
</style>
